<template>
    <div class="collapse">
    <el-radio-group v-model="isCollapse" style="margin-top: 10px;">
      <el-radio-button :label="false" v-show="isCollapse">展开</el-radio-button>
      <el-radio-button :label="true" v-show="!isCollapse" style="background:#409EFF;width:200px;text-align:center;">收起</el-radio-button>
    </el-radio-group>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" unique-opened @open="handleOpen" @close="handleClose" :collapse="isCollapse" router :collapse-transition="false">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span slot="title">用户管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/about/userlist">用户列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span slot="title">权限管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/about/role">角色列表</el-menu-item>
          <el-menu-item index="/about/ListView">权限列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-document"></i>
          <span slot="title">商品管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/liebiao">商品列表</el-menu-item>
          <el-menu-item index="/classify">分类参数</el-menu-item>

          <el-menu-item index="1-1">商品分类</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span slot="title">订单管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/about/Listofgoods">订单列表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="5">
        <template slot="title">
          <i class="el-icon-s-data"></i>
          <span slot="title">数据统计</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/about/ditu">数据报表</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </el-menu>
    </div>
</template>
  <script>
    export default {
      data() {
        return {
          isCollapse: true
        };
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        }
      }
  }
  </script>

<style lang="scss"> 
   .collapse .el-radio-button__inner{
    background: #409EFF;
    color:#fff;
    border:none;
   }
</style>